<template>
  <div>
    <popup v-if="login && isPopup"></popup>
    <popdrag></popdrag>
    <pop-drag-call-process></pop-drag-call-process>
    <download v-if="login"></download>
    <notify v-if="login"></notify>
    <invite-conversation v-if="login && inviteCon" :inviteType="'beInvited'" :inviteContents="inviteContents"></invite-conversation>
    <invite-conversation v-if="login && inviteCon"></invite-conversation>
    <video-invite v-if="login&&inviteVideo"></video-invite>
    <video-drag v-if="login&&isVideoing"></video-drag>
    <share-screen-drag v-if="login && isShareScreening"></share-screen-drag>
    <remote-control-input v-if="login && isRemoteControl"></remote-control-input>
    <webchatTransferNotice v-if="login" />
    <div v-show="imgShow" class="bigImageDiv">
      <!--图片放大组件-->
      <vue-picture class="bigImageView" :imgObj="imgObj" @closeImgView="bigImgClose" v-if="imgShow"></vue-picture>
    </div>
    <el-dialog :close-on-click-modal="false" :visible.sync="imgOldShow" width="100%" :fullscreen="true" @close="bigOldImgClose" :show-close="true" custom-class="bigimg">
      <div class="img-box" @click.stop="bigOldImgClose">
        <img :src="imgOldUrl" style="max-width: 100%">
      </div>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" class="media-dialog" :visible.sync="mediaObj.textShow" width="100%" :fullscreen="true" @close="mediaClose" :show-close="true" custom-class="bigimg show-media-text">
      <div class="img-box" :class="mediaObj.flag === 'text' ? 'frame-text' : ''">
        <audio :src="mediaObj.textUrl" preload="auto" class="audio-style" controls="" v-if="mediaObj.flag === 'audio'">亲 您的浏览器不支持html5的audio标签</audio>
        <video class="audio-style" width="700" height="500" controls="" v-if="mediaObj.flag === 'video'">
          <source :src="mediaObj.textUrl" type="video/mp4">
          您的浏览器不支持 video 标签。
        </video>
        <div v-if="mediaObj.flag === 'pdf'">
          <iframe :src="mediaObj.textUrl" frameborder="0" class="pdf-style"></iframe>
        </div>
        <div v-if="mediaObj.flag === 'text'">
          <iframe :src="mediaObj.textUrl" frameborder="0" class="text-style"></iframe>
        </div>
      </div>
    </el-dialog>
    <iframe name="report_export_pdf_show_print" id="report_export_pdf_show_print" src="" style="border: 0;position: absolute;z-index: -10"></iframe>
    <div id="label_style_7moor"></div>
  </div>
</template>
<script>
  import { mapState } from 'vuex'
  import popup from '@/components/public-modules/popups/Popup.vue'
  import popdrag from '@/components/public-modules/popups/PopDrag.vue'
  import download from '@/components/public-modules/download/Download.vue'
  import notify from '@/components/public-modules/notify/Notify.vue'
  import InviteConversation from '@/components/public-modules/InviteConversation/InviteConversation.vue'
  import * as types from '@/store/mutation-types.js'
  import videoInvite from '@/components/business-modules/webchat/WebchatVideoInvite.vue'
  import videoDrag from '@/components/public-modules/popups/PopDragVideo.vue'
  import shareScreenDrag from '@/components/public-modules/popups/popDragShareScreen.vue'
  import PopDragCallProcess from '@/components/public-modules/popups/PopDragCallProcess.vue'
  import remoteControlInput from '@/components/public-modules/remoteControlInput/index.vue'
  import vuePicture from '@/components/ui-modules/affix/vuePicture.vue'
  import webchatTransferNotice from '@/components/business-modules/webchat/webchatTransferNotice.vue'
  export default {
    name: 'loginContent',
    data () {
      return {
      }
    },
    watch: {
      exit (cur, pre) {
        if (cur) {
          this.msgDialog(this.$t(cur))
        }
      },
      unBindGateway (current) {
        if (current) {
          this.msgDialog(this.$t(current), true)
        }
      }
    },
    computed: {
      mediaObj () {
        return this.$store.state.massMedia
      },
      imgShow () {
        return this.$store.state.bigImg.imgShow
      },
      imgOldShow () {
        return this.$store.state.bigOldImg.imgShow
      },
      imgOldUrl () {
        return this.$store.state.bigOldImg.imgUrl
      },
      imgObj () {
        return this.$store.state.bigImg
      },
      ...mapState({
        login: 'login',
        isPopup: 'isPopup',
        inviteCon: 'inviteCon',
        exit: 'exit',
        unBindGateway: 'unBindGateway'
      }),
      isRemoteControl () {
        return this.$store.state.RemoteControl.isRemoteControl
      },
      isVideoing () {
        return this.$store.state.webchat && this.$store.state.webchat.isVideoing
      },
      inviteVideo () {
        return this.$store.state.webchat && this.$store.state.webchat.isinviteVideo
      },
      inviteContents () {
        return this.$store.state.inviteContents
      },
      isShareScreening () {
        return this.$store.state.webchat && this.$store.state.webchat.isShareScreening
      }
    },
    methods: {
      bigOldImgClose () {
        let msg = {
          show: false,
          url: ''
        }
        this.$store.commit(types.SET_OLD_BIGIMG, msg)
      },
      // 关闭视频，音频弹框
      mediaClose () {
        let msg = {
          show: false,
          url: '',
          flag: ''
        }
        this.$store.commit(types.SET_AUDIO_VUDIO, msg)
      },
      bigImgClose () {
        let msg = {
          show: false,
          url: '',
          index: 0,
          list: []
        }
        this.$store.commit(types.SET_BIGIMG, msg)
      },
      msgDialog (msg, flag) {
        let mask = document.querySelectorAll('.el-loading-mask')
        mask = Array.prototype.slice.call(mask) // 将 NodeList 转换为数组
        if (mask.length) {
          mask.forEach((item) => {
            item.style.display = 'none'
          })
        }
        if (flag) { // 您的网关还没有绑定,请拨打0000进行绑定
          this.$alert(msg, this.$t('public.tip'), {
            confirmButtonText: this.$t('public.confirm'),
            confirmButtonClass: 'primary_btn',
            type: 'warning',
            showCancelButton: false
          }).then(() => {
            console.log('关闭了')
          })
        } else {
          window.sessionStorage.clear()
          this.$alert(msg, this.$t('public.tip'), {
            confirmButtonText: this.$t('public.confirm'),
            confirmButtonClass: 'primary_btn',
            type: 'warning',
            showCancelButton: false,
            showClose: false // ele dialog的参数，功能好使，不知道后续版本支持如何
          }).then(() => {
            window.location = '/'
            if (window.sessionStorage.loginType !== 'sessionId') { // 不是session登录的
              // gio('clearUserId')
            }
          })
        }
      }
    },
    components: {
      vuePicture,
      download,
      popup,
      popdrag,
      notify,
      InviteConversation,
      videoInvite,
      videoDrag,
      PopDragCallProcess,
      shareScreenDrag,
      remoteControlInput,
      webchatTransferNotice
    }
  }
</script>
<style lang="stylus" scoped>
  .customer-down
    position: absolute;
    width: 40px;
    height: 40px;
    cursor: pointer;
    right: 75px;
    top: 37px;
    z-index: 100;
  .frame-text
    background-color: rgb(42, 42, 75);
  .text-style
    padding: 30px 0px 20px 20px;
    width: 100%;
    -webkit-filter:invert(100%);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height 100%
  .pdf-style
    padding-top: 30px;
    width: 100vw;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height 100%
  .audio-style
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
</style>
